<template>
  <el-dialog title="设置" :visible="showDialog" width="50%">
    <el-tabs v-model="activeName">
      <el-tab-pane label="出勤设置" name="first">
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
          <el-form-item label="部门:" prop="name">
            <el-select v-model="form.name" prop="name" @focus="getDepartment">
              <el-option
                v-for="item in bumenList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
            <!-- 选择时间 -->
          </el-form-item>
          <el-form-item label="出勤时间:">
            <el-time-picker
              label="出勤时间"
              v-model="form.date2"
              style="width: 20%;"
            ></el-time-picker>
            -
            <el-time-picker
              label="出勤时间"
              v-model="form.date2"
              style="width: 20%;"
            ></el-time-picker>
            -
            <el-time-picker
              label="出勤时间"
              v-model="form.date2"
              style="width: 20%;"
            ></el-time-picker>
            -
            <el-time-picker
              label="出勤时间"
              v-model="form.date2"
              style="width: 20%;"
            ></el-time-picker>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="请假设置" name="second"></el-tab-pane>
      <el-tab-pane label="扣款设置" name="third"></el-tab-pane>
      <el-tab-pane label="加班设置" name="fourth"></el-tab-pane>
    </el-tabs>
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" size="small">保存更新</el-button>
        <el-button size="small" @click="btnCancel">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { getDepartment } from '@/api/department'
import { getCfg, getleave } from '@/api/attendances'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      activeName: 'first', // 默认显示第一条数据
      form: {
        name: ''
      },
      bumenList: [],
      bumenId: '',
      rules: {
        name: [{ required: true, message: '内容不能为空', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.getDepartment()
    // this.getCfg()
    // this.getleave()
  },
  methods: {
    async getDepartment () {
      let res = await getDepartment()
      console.log(res)
      this.bumenList = res.data.depts.filter(item => item.pid != '-1')
      this.form.name = this.bumenList[0].name

      // this.bumenId = this.bumenList[0].id
      // console.log(this.bumenId)
      // let msg = await getCfg(this.bumenId)
      // console.log(msg)
    },
    // async getleave () {
    //   let res = await getleave()
    //   console.log(res)
    // },
    btnCancel () {
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style scoped></style>
